<template>
	<scroll 
		class="listview" 
		:data="data" 
		ref="listview" 
		:listenScroll="listenScroll"
		:probeType="probeType"
		@scroll="scroll"
	>
		<ul>
			<li v-for="group in data" class="list-group" ref="listGroup">
				<h2 class="list-group-title">{{group.title}}</h2>
				<ul>
					<li v-for="item in group.items" @click="selectItem(item)" class="list-group-item">
						<img v-lazy="item.avatar" class="avatar">
						<span class="name">{{item.name}}</span>							
					</li>
				</ul>
			</li>
		</ul>
		<div 
			class="list-shortcut" 
			@touchstart.stop.prevent="onShortcutTouchStart"
			@touchmove.stop.prevent="onShortcutTouchMove"
      @touchend.stop
     >
			<ul>
				<li v-for="(item, index) in shortcutList" 
					class="item" 
					:data-index="index"
					:class="{'current':currentIndex===index}"
				>{{item}}</li>
			</ul>
		</div>
		<div class="list-fixed" v-show="fixedTitle">
      <div class="fixed-title" ref="fixed">{{fixedTitle}} </div>
    </div>
    <div v-show="!data.length" class="loading-container">
      <loading></loading>
    </div>
	</scroll>
</template>

<script>
  import Loading from 'base/loading/loading'
	import Scroll from 'base/scroll/scroll'
  import { getData } from 'common/js/dom'

  const TITLE_HEIGHT = 30

	export default {
		props: {
			data: {
				type: Array,
				default: []
			}
		},
		components: {
			Scroll,
			Loading
		},
		data () {
			return {
				scrollY: -1,
				currentIndex: 0,
				diff: -1,
				timer: null
			}
		},
		computed: {
			shortcutList() {
        return this.data.map((group) => {
          return group.title.substr(0, 1)
        })
      },
      fixedTitle () {
      	if (this.scrollY > 0) {
      		return ''
      	}
      	return this.data[this.currentIndex] ? this.data[this.currentIndex].title : ''
      }
		},
		created () {
			this.listenScroll = true,
			this.listHeight= []
			this.probeType = 3
		},
		methods: {
			selectItem (item) {
				this.$emit('select', item)
			},
			onShortcutTouchStart (e) {
				let anchorIndex = getData(e.target, 'index')
				this._scrollTo(anchorIndex)
			},
			onShortcutTouchMove (e) {
				if(this.timer) {
					clearTimeout(this.timer)
				}
				this.timer = setTimeout (() => {
					const touchY = e.touches[0].clientY
					const anchorIndex = Math.floor((touchY - 208) / 18)
					this._scrollTo(anchorIndex)
				},16)
			},
			scroll (pos) {
        this.scrollY = pos.y
			},
			_scrollTo (index) {
				if (index === null) {
          return
        }
        if (index < 0) {
        	index = 0
        } else if (index > this.listHeight.length -2) {
        	index = this.listHeight.length -2
        }
				this.scrollY = -this.listHeight[index]
				this.$refs.listview.scrollToElement(this.$refs.listGroup[index],0)
			},
			_calculateHeight () {
				this.listHeight = []
				const list = this.$refs.listGroup
				let height = 0
				this.listHeight.push(height)
				for (let i=0; i<list.length; i++) {
					let item = list[i]
					height += item.clientHeight
					this.listHeight.push(height)
				}
			}
		},
		watch: {
			data () {
				setTimeout(() => {
					this._calculateHeight()
				},20)
			},
			scrollY (newY) {
				const listHeight = this.listHeight
				//当滚动到顶部,newY>0
				if (newY > 0) {
					this.currentIndex = 0
					return
				}
				// 再中间部分滚动
				for (let i=0; i<listHeight.length - 1; i++) {
					let height1 = listHeight[i]
					let height2 = listHeight[i + 1]
					if (-newY >= height1 && -newY < height2) {
						this.currentIndex = i
            this.diff = height2 + newY
						return
					}
				}
				//当滚动到底部，且-newY大于最后一个元素的上限
				this.currentIndex = listHeight.length - 2
			},
			diff(newVal) {
        let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
        if (this.fixedTop === fixedTop) {
          return
        }
        this.fixedTop = fixedTop
        // this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
        if (this.fixedTop < 0 && this.fixedTop > -30 ) {
        	if (this.fixedTop < -15 && this.fixedTop > -30 ){
        		this.$refs.fixed.innerText = ' '
        	} else {
        		this.$refs.fixed.innerText = this.data[this.currentIndex].title
        	}
        	this.$refs.fixed.style.opacity = (30 + this.fixedTop) / 30
        } else {
        	this.$refs.fixed.innerText = this.data[this.currentIndex].title
        	this.$refs.fixed.style.opacity = 1
        }
      }
		}
	}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"
	.listview
		position: ralative
		width: 100%
		height: 100%
		overflow: hidden
		background: $color-background
		.list-group
			padding-bottom: 30px
			.list-group-title
				height: 30px
				line-height: 30px
				padding-left: 20px
				font-size: $font-size-small
				color: $color-text-l
				background: $color-highlight-background
			.list-group-item
				display: flex
				align-items: center
				padding: 20px 0 0 30px
				.avatar
					width: 50px
					height: 50px
					border-radius: 50%
				.name
					margin-left: 20px
					color: $color-text-l
					font-size: $font-size-medium
		.list-shortcut
			position: absolute
			z-index: 30
			right: 0
			top: 50%
			transform: translateY(-50%)
			width: 20px
			padding: 20px 0
			border-radius: 10px
			text-align: center
			background: $color-background-d
			font-family: Helvetica
			.item
				padding: 3px
				line-height: 1
				color: $color-text-l
				font-size: $font-size-small
				&.current
					color: $color-theme
		.list-fixed
			position: absolute
			top: -0.5px
			left: 0
			width: 100%
			opacity: 1
			.fixed-title
				height: 30px
				line-height: 30px
				padding-left: 20px
				font-size: $font-size-small
				color: $color-text-l
				background: $color-highlight-background
		.loading-container
			position: absolute
			width: 100%
			top: 50%
			transform: translateY(-50%)
</style>